<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>中新生态城微型站实时状态监测</title>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=bXD2LO0j2HgnWVZMXx2g5FeExhoV8HVD"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.1.2/js/jquery-weui.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

</head>
<body>
<!--<div id="tipInfo" style="display: block;">
   &lt;!&ndash; location<br>
    开始时间：startTime <br>
    结束时间：endTime&ndash;&gt;

        <div id='airQuality' style=''>
            <div style='text-align: center'> 更新时间:  {{updateTime}} </div>
            <div class='bs-example bs-example-tabs' data-example-id='togglable-tabs'>
                <ul class='nav nav-tabs' role='tablist' style=' border-bottom: none;display: flex;justify-content: center;padding: .5rem 0;'>
                    <li id='li_ci' role='presentation' style='border:none;display: inline-block;text-align: center;'>
                        <a href='#ci' id='tab_ci' role='tab' data-toggle='tab' aria-controls='ci' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>综指<br/>
                            <div v-bind:style="{background:ci_bgcolor}" class="bgcolor">{{ci}}
                            </div>
                        </a>
                    </li>
                    <li id='li_aqi' role='presentation' style='border:none;display: inline-block;text-align: center;'>
                        <a href='#aqi' id='tab_aqi' role='tab' data-toggle='tab' aria-controls='aqi' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>AQI<br/>
                            <div v-bind:style="{background:aqi_bgcolor}" class="bgcolor">{{aqi}}</div>
                        </a>
                    </li>
                    <li id='li_pm25' role='presentation' style='border:none;display: inline-block;text-align: center;'>
                        <a href='#pm25' id='tab_pm25' role='tab' data-toggle='tab' aria-controls='pm25' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>PM2.5<br/>
                            <div v-bind:style="{background:pm25_bgcolor}" class="bgcolor">{{pm25}}</div>
                        </a>
                    </li>
                    <li id='li_pm10' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#pm10' id='tab_pm10' role='tab' data-toggle='tab' aria-controls='pm10' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>PM10<br/>
                        <div v-bind:style="{background:pm10_bgcolor}" class="bgcolor">{{pm10}}</div>
                        </a>
                    </li>
                </ul>
                <ul class='nav nav-tabs' role='tablist' style=' border-bottom: none;display: flex;justify-content: center;padding: .5rem 0;'>
                    <li id='li_so2' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#so2' id='tab_so2' role='tab' data-toggle='tab' aria-controls='so2' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>SO2<br/><div v-bind:style="{background:so2_bgcolor}" class="bgcolor">{{so2}}</div>
                    </a>
                    </li>
                    <li id='li_no2' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#no2' id='tab_no2' role='tab' data-toggle='tab' aria-controls='no2' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>NO2<br/>
                        <div v-bind:style="{background:no2_bgcolor}" class="bgcolor">{{no2}}</div>
                    </a>
                    </li>
                    <li id='li_o3' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#o3' id='tab_o3' role='tab' data-toggle='tab' aria-controls='o3' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>O3 <br/>
                        <div v-bind:style="{background:o3_bgcolor}" class="bgcolor">{{o3}}</div>
                    </a>
                    </li>
                    <li id='li_co' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#co' id='tab_co' role='tab' data-toggle='tab' aria-controls='co' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>CO<br/>
                        <div v-bind:style="{background:co_bgcolor}" class="bgcolor">{{co}}</div>
                    </a>
                    </li>
                </ul>
            </div>
        </div>
</div>-->

<div id="allmap" style="height:28rem;"></div>

<script type="text/javascript">

    // 初始化数据绑定
    /* var airQuality = new Vue({
     el: '#airQuality',
     data: {
     ci: '',
     ci_bgcolor:'',
     aqi:'',
     aqi_bgcolor:'',
     pm25:'',
     pm25_bgcolor:'',
     pm10:'',
     pm10_bgcolor:'',
     co:'',
     co_bgcolor:'',
     o3:'',
     o3_bgcolor:'',
     so2:'',
     so2_bgcolor:'',
     no2:'',
     no2_bgcolor:'',
     wind_info:'',
     update_time:''
     }
     });*/

    var lng = 117.464843;
    var lat = 39.123571;
    var level = 10;
    //初始化baidu地图
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, level);
    map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放

    var options = {
        width : 200,     // 信息窗口宽度
        height: 140,
        // 信息窗口高度
        //title : "信息窗口" , // 信息窗口标题
        enableMessage:true//设置允许信息窗发送短息
    };
    function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
                    openInfo(content,e)}
        );
    }
    function openInfo(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,options);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }

    //左上角添加地图缩放按钮
    var opts = {anchor: BMAP_ANCHOR_TOP_LEFT};
    map.addControl(new BMap.NavigationControl(opts));

    // map.addControl(new BMap.MapTypeControl());
    // 添加地图类型控件
    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
    // map.disable3DBuilding();

    // 设置地图显示的城市（此项是必须设置的）
    map.setCurrentCity("天津");

    // 地图自定义样式
    map.setMapStyle({
        styleJson: [{
            'featureType': 'water',
            'elementType': 'all',
            'stylers': {
                'color': '#d1d1d1'
            }
        }, {
            'featureType': 'land',
            'elementType': 'all',
            'stylers': {
                'color': '#f3f3f3'
            }
        }, {
            'featureType': 'railway',
            'elementType': 'all',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'all',
            'stylers': {
                'color': '#fdfdfd'
            }
        }, {
            'featureType': 'highway',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'geometry',
            'stylers': {
                'color': '#fefefe'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#fefefe'
            }
        }, {
            'featureType': 'poi',
            'elementType': 'all',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'green',
            'elementType': 'all',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'subway',
            'elementType': 'all',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'manmade',
            'elementType': 'all',
            'stylers': {
                'color': '#d1d1d1'
            }
        }, {
            'featureType': 'local',
            'elementType': 'all',
            'stylers': {
                'color': '#d1d1d1'
            }
        }, {
            'featureType': 'arterial',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        }, {
            'featureType': 'boundary',
            'elementType': 'all',
            'stylers': {
                'color': '#fefefe'
            }
        }, {
            'featureType': 'building',
            'elementType': 'all',
            'stylers': {
                'color': '#d1d1d1'
            }
        }, {
            'featureType': 'label',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#666666'
            }
        }]
    });

    //已经加载的 label
    var labels = [];
    //增加 label
    function addLabel(data){
        var point = new BMap.Point(data.lng,data.lat);
        var opts = {
            position : point ,  // 指定文本标注所在的地理位置
            offset   : new BMap.Size(0, 10)    //设置文本偏移量
        };
        var label = new BMap.Label(data.location, opts);  // 创建文本标注对象
        console.log(data);
        label.setStyle({
            color : "#000000",
            fontSize : "10px",
            /* width : "100px",
             height: "100px",*/
            textAlign : "center",
            border : "none",
            //lineHeight : "20px",
            fontFamily:"微软雅黑"
        });
        map.addOverlay(label);
        labels.push(label);
    }

    /*  function removeLabels(){
     if(labels.length > 0){
     for(var i=0;i<labels.length;i++){
     map.removeOverlay(labels[i])
     }
     }
     labels = [];
     }
     */

    function getValue(value){
        if(value != null){
            return value;
        }else return " "
    }
    // 读取空气质量数据
    // var baseURL = "http://dev2.airsensor.org/airapi/station/TianjingByStation/";
    var baseURL = "http://dev2.airsensor.org/airapi/dev/map/";
    function getAirData(lat,lng,level) {
        //axios.get(baseURL+name).then(function (response) {
        //var url = baseURL + name + "?" + (new Date()).getTime();
        $.ajax({
            type: "get",
            async: true,
            url: baseURL  + lat +"/"+ lng + "/" + level,
            dataType: "jsonp",
            jsonp: "callback",
            success: function (data){
                console.log(data);
                // update map date
                // removeLabels();
                for (var i = 0; i < data.length; i++) {
                    var pt = new BMap.Point(data[i].lng, data[i].lat);
                    var myIcon = new BMap.Icon("https://gitee.com/libinos/AirviewPlatform/raw/master/images/fixed-point@2x.png", new BMap.Size(30,60));
                    // 创建标注
                    var marker2 = new BMap.Marker(pt,{icon:myIcon});
                    var data_info = [getValue(data[i].compIndex),getValue(data[i].aqi),getValue(data[i].pm2d5),getValue(data[i].pm10),data[i].so2,getValue(data[i].no2),getValue(data[i].o3),getValue(data[i].co)];
                    var data_info_02 = [data[i].compIndexColor,data[i].aqiColor,data[i].pm2d5Color,data[i].pm10Color,data[i].so2Color,data[i].no2Color,data[i].o3Color,data[i].coColor];
                    var content =
                            "<div><div id='airQuality' style='background-color: ;'><div style='text-align: center'> 更新时间: " + getValue(data[i].updateTime)  +
                            "</div><div class='bs-example bs-example-tabs' data-example-id='togglable-tabs'><ul class='nav nav-tabs' role='tablist' style=' border-bottom: none;display: flex;justify-content: center;padding: .5rem 0;'><li id='li_ci' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#ci' id='tab_ci' role='tab' data-toggle='tab' aria-controls='ci' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>综指<br/><div style='background-color:" + data_info_02[0] + ";font-size:13px;border-radius: 2px;color:#000;text-align:center;width: 2.5rem;padding-right: 10px;padding-left: 10px;'>" + data_info[0] +
                            "</div></a></li><li id='li_aqi' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#aqi' id='tab_aqi' role='tab' data-toggle='tab' aria-controls='aqi' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>AQI<br/><div style='background:" + data_info_02[1] + ";font-size:13px;border-radius: 2px;color:#000;text-align:center;width: 2.5rem;padding-right: 10px;padding-left: 10px;'>" + data_info[1] + "</div></a></li><li id='li_pm25' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#pm25' id='tab_pm25' role='tab' data-toggle='tab' aria-controls='pm25' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>PM2.5<br/><div style='background:" + data_info_02[2]  + ";font-size:13px;border-radius: 2px;color:#000;text-align:center;width: 2.5rem;padding-right: 10px;padding-left: 10px;'>" + data_info[2] + "</div></a></li><li id='li_pm10' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#pm10' id='tab_pm10' role='tab' data-toggle='tab' aria-controls='pm10' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>PM10<br/><div style='background: " + data_info_02[3] + ";font-size:13px;border-radius: 2px;color:#000;text-align:center;width: 2.5rem;padding-right: 10px;padding-left: 10px;'>" + data_info[3] + "</div></a></li></ul><ul class='nav nav-tabs' role='tablist' style=' border-bottom: none;display: flex;justify-content: center;padding: .5rem 0;'><li id='li_so2' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#so2' id='tab_so2' role='tab' data-toggle='tab' aria-controls='so2' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>SO2<br/><div style='background:" + data_info_02[4] + ";font-size:13px;border-radius: 2px;color:#000;text-align:center;width: 2.5rem;padding-right: 10px;padding-left: 10px;'>"+ data_info[4] +"</div></a></li><li id='li_no2' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#no2' id='tab_no2' role='tab' data-toggle='tab' aria-controls='no2' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>NO2<br/><div style='background:" + data_info_02[5] + ";font-size:13px;border-radius: 2px;color:#000;text-align:center;width: 2.5rem;padding-right: 10px;padding-left: 10px;'>"+ data_info[5] +"</div></a></li><li id='li_o3' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#o3' id='tab_o3' role='tab' data-toggle='tab' aria-controls='o3' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>O3 <br/><div style='background:" +   data_info_02[6] + ";font-size:13px;border-radius: 2px;color:#000;text-align:center;width: 2.5rem;padding-right: 10px;padding-left: 10px;'>"+ data_info[6] +"</div></a> </li><li id='li_co' role='presentation' style='border:none;display: inline-block;text-align: center;'><a href='#co' id='tab_co' role='tab' data-toggle='tab' aria-controls='co' aria-expanded='true' style='display: inline-block;color: #666666;font-size:14px;margin:0 auto;padding:0;border: 1px solid #fff;'>CO<br/><div style='background-color:" + data_info_02[7] + ";font-size:13px;border-radius: 2px;color:#000;text-align:center;width: 2.5rem;padding-right: 10px;padding-left: 10px;'>"+ data_info[7] +"</div></a></li></ul></div></div><div id='urbanMap' class='baidu-maps'></div></div>";

                    addClickHandler(content,marker2);
                    // 将标注添加到地图中
                    map.addOverlay(marker2);

                    var airInfo = data[i];
                    addLabel(airInfo);
                }
            },
            error: function () {
                $.toast("获取数据失败");
            }
        })
    }
    getAirData(lat,lng,level);
    // window.onload = loadJScript;  //异步加载地图
</script>
</body>
</html>

